<mat-form-field fxFlex
                [formGroup]="formGroup">
  <div *ngIf="config.icon"
       matPrefix>
    <mat-icon [svgIcon]="config.icon"></mat-icon>
  </div>
  <mat-label>{{ config.label | translate }}</mat-label>
  <input matInput
         [type]="type"
         autocorrect="off"
         [autocomplete]="config.autocomplete"
         autocapitalize="none"
         [formControlName]="config.name"
         [placeholder]="config.placeholder | translate"
         [readonly]="config.readonly"
         [autofocus]="config.autofocus"
         [required]="config.validators?.required"
         [minlength]="config.validators?.minLength"
         [maxlength]="config.validators?.maxLength">
  <button *ngIf="type === 'password'"
          mat-icon-button
          matSuffix
          matTooltip="{{ 'Show' | translate }}"
          (click)="onToggleVisibility()">
    <mat-icon svgIcon="mdi:eye-outline"></mat-icon>
  </button>
  <button *ngIf="type !== 'password'"
           mat-icon-button
           matSuffix
           matTooltip="{{ 'Hide' | translate }}"
           (click)="onToggleVisibility()">
    <mat-icon svgIcon="mdi:eye-off-outline"></mat-icon>
  </button>
  <button *ngIf="config.hasCopyToClipboardButton"
          matSuffix
          matTooltip="{{ 'Copy to clipboard' | translate }}"
          (click)="onCopyToClipboard()">
    <mat-icon svgIcon="{{ icon.copy }}"></mat-icon>
  </button>
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)"
          translate>
      This field is required.
    </span>
    <span *ngIf="formGroup.hasError('minlength', config.name)"
          translate>
      The value must be at least {{ config.validators.minLength }} characters long.
    </span>
    <span *ngIf="formGroup.hasError('maxlength', config.name)"
          translate>
      The value cannot exceed {{ config.validators.maxLength }} characters.
    </span>
    <span *ngIf="formGroup.hasError('constraint', config.name)">
      {{ formGroup.getError('constraint', config.name) | translate }}
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0"
            [innerHTML]="config.hint | translate">
  </mat-hint>
</mat-form-field>
